<script setup lang="ts">
import { ref, watchEffect } from "vue";
const props = defineProps({
  content: {
    type: String,
    default: "",
  },
  stream: {
    type: Boolean,
    default: false,
  },
});

let contentStream = ref("");
let index = 0;

function writing() {
  if (index < props.content.length) {
    contentStream.value += props.content[index++];
    requestAnimationFrame(writing);
  }
}

watchEffect(() => {
  if (props.stream) {
    writing();
  } else {
    contentStream.value = props.content;
  }
});
</script>

<template>
  <div class="chat-assistant">
    <a-avatar :size="32" shape="square">
      <icon-robot />
    </a-avatar>

    <p class="chat-content">
      {{ contentStream }}
    </p>
  </div>
</template>

<style scoped>
.chat-assistant {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  font-size: 14px;
  border-radius: 8px;

  .chat-content {
    position: relative;
    flex: 1;
    width: 100%;
    margin: auto;
    line-height: 20px;
    white-space: pre-wrap;
  }
}
</style>
